<template>
	<view>
		<x-scroll @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="true">
			<view style="padding-top: 40rpx;">
				<view class="address" >
					<!-- <image v-if="l == 0" class="img" src="../../static/img/check.png" mode=""></image>
					<image v-else class="img" src="../../static/img/check_1.png" mode=""></image> -->
					<view class="address-1">
						<view class="name">
							<text>名字</text>
							<text>手机</text>
						</view>
						<view class="address-2">
							地址
						</view>
						<view class="use">
							<view class="use-1" @click="setDefault()">
<!-- 								<image src="../../static/img/check.png" mode="" v-if="item.is_default == 'N'"></image>
								<image src="../../static/img/check_2.png" mode="" v-else></image> -->
								<radio :id="item.name" :value="item.name" :checked="item.checked"></radio><text>设为默认地址</text>
							</view>
							<view class="use-2">
								<text @tap="delAddressOpen()">删除</text>
								<text @tap="goto_address()">编辑</text>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 178rpx;"></view>
			</view>
		</x-scroll>
		<view class="add" @tap="add_address">
			+添加收货地址
		</view>
		<uni-popup ref="cancel" type="center" :maskClick="false">
			<view class="cancel">
				<view class="title">
					确认删除地址吗？
				</view>
				<view class="cancel-0">
					<view class="cancel-1" @tap="close_cancel">
						取消
					</view>
					<view class="cancel-2" @tap="delAddress">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="Address" type="center" :maskClick="false">
			<view class="cancel" style="width: 680rpx;">
				<view class="title">
					添加新收货地址
				</view>
				<view class="currency">
					<text>联系人</text>
					<input type="text" placeholder="名字" v-model="username">
				</view>
				<view class="currency">
					<text>手机号</text>
					<input type="text" placeholder="手机号码" v-model="phone">
				</view>
				<uni-data-picker :localdata="cityTree" :map="cityMap" popup-title="地区信息" @change="onchange" @nodeclick="onnodeclick">
				<view class="currency-1">
					<text class="currency-1-1">选择地区</text>
					<text class="currency-1-2" v-if="!area">地区信息</text>
					<view class="currency-1-2 currency-1-3" v-else>{{area}}</view>
					<!-- <image src="../../static/img/coordinate-1.png" mode=""></image> -->
				</view>
				</uni-data-picker>
				<view class="currency-2">
					<text>详细地址</text>
					<textarea placeholder="街道门牌信息" v-model="address1"></textarea>
				</view>
				<view class="cancel-0">
					<view class="cancel-1" @tap="close_cancel">
						取消
					</view>
					<view class="cancel-2" @tap="delAddress">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import address from './address.js';
	export default {
		data() {
			return {
				area:'',
				cityTree: address,
				cityMap:{text:'name',value: 'name'},
				address1:'',
				username:'',
				phone:''
			};
		},
		onLoad() {
			// let add = address;
			// console.log(add,'===地区信息');
			// this.cityTree =add
		},
		methods:{
			onchange(e){
				 console.log(e.detail);
				   let arr = Array.isArray(e.detail.value) ? e.detail.value : [];
				   let strs = arr.map(item => {
				     let s = item.text;
				     if (s == '市辖区') {
				       s = '';
				     }
				     return s;
				   });
				   this.area = strs.join(' ');
				   console.log(this.area, '-----------');
			},
			close_cancel() {
				this.$refs['cancel'].close();
				this.$refs['Address'].close();
			},
			delAddressOpen(){
				this.$refs['cancel'].open();
			},
			async delAddress(){
				let parts = this.area.split(" ");
				let res = await this.$api.post('/UserAddress/Add',{
						Province:parts[0],
						City:parts[1],
						Area:parts[2],
						Address: this.address1,
						Accepter: this.username,
						Phone:this.phone,
						IsDefault:0,
				})
				
				// success(res) {
					
				// 	return
				// 	// _this.SingAction();
				
				// },
				// fail(err) {
				// 	_this.$pv.msg('添加失败');
				// },
				this.$refs['Address'].close();
			},
			
			change_type(i){
				if(this.type_index == i){
					return true
				}else{
					this.type_index = i
				}
			},
			onnodeclick(e){
				console.log(e,"节点被点击了");
			},
			
			add_address(){
				this.$refs['Address'].open();
				// uni.navigateTo({
				// 	url:'/pages/mallOrders/add_address'
				// })
			},
			
		},
		async onShow(){
			// await this.getList();
			// this.loading = false;
		}
		
	}
</script>

<style lang="scss">
	.address{
		margin: 40rpx 36rpx 0;
		background: #EEEFF3;
		// box-shadow: 6rpx 6rpx 20rpx 0rpx #BFC2CD, -6rpx -6rpx 20rpx 0rpx #FFFFFF, inset 10rpx 10rpx 50rpx 0rpx rgba(191,194,205,0.6), inset -10rpx -10rpx 50rpx 0rpx #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx 36rpx 25rpx;
		display: flex;
		&:first-child{
			margin-top: 0;
		}
		.img{
			margin-top: 26rpx;
			margin-right: 26rpx;
			width: 58rpx;
			height: 58rpx;
			flex-shrink: 0;
		}
		.address-1{
			// width: 520rpx;
			// margin-left: 26rpx;
			flex: 1;
			.name{
				display: flex;
				align-items: center;
				text{
					&:first-child{
						color: #000000;
						font-size: 28rpx;
						line-height: 33rpx;
					}
					&:last-child{
						margin-left: 12rpx;
						color: #000000;
						font-size: 24rpx;
						line-height: 28rpx;
					}
				}
			}
			.address-2{
				margin-top: 13rpx;
				color: #7F828D;
				font-size: 24rpx;
				line-height: 28rpx;
				padding-bottom: 26rpx;
				border-bottom: 1rpx solid #C8CBD8;
			}
			.use{
				margin-top: 8rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.use-1{
					display: flex;
					align-items: center;
					image{
						width: 52rpx;
						height: 52rpx;
					}
					text{
						font-size: 20rpx;
						color: #7F828D;
						line-height: 23rpx;	
					}
				}
				.use-2{
					display: flex;
					align-items: center;
					text{
						font-size: 20rpx;
						line-height: 23rpx;
						color: #181818;
						margin-left: 30rpx;
					}
				}
			}
		}
	}
	.add{
		position: fixed;
		left: 29rpx;
		bottom: 79rpx;
		z-index: 10;
		width: 691rpx;
		height: 69rpx;
		background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
		// box-shadow: 6rpx 6rpx 12rpx 0rpx #BFC2CD, -6rpx -6rpx 12rpx 0rpx #FFFFFF, inset 0rpx 4rpx 8rpx 0rpx #04B0AB, inset -4rpx -4rpx 8rpx 0rpx #A1E2DB;
		border-radius: 107rpx 107rpx 107rpx 107rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
		.cancel{
		width: 540rpx;
		background: #EEEFF3;
		// box-shadow: 10rpx 10rpx 20rpx 0rpx rgba(0,0,0,0.3), -10rpx -10rpx 20rpx 0rpx rgba(255,255,255,0.3), inset 10rpx 10rpx 50rpx 0rpx #E0F5F3, inset -10rpx -10rpx 50rpx 0rpx #EEEFF3, 0rpx 4rpx 4rpx 0rpx rgba(0,0,0,0.25);
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		overflow: hidden;
		.title{
			margin-top: 32rpx;
			color: #181818;
			line-height: 42rpx;
			text-align: center;
			font-size: 40rpx;
		}
		.cancel-0{
			display: flex;
			align-items: center;
			padding: 38rpx 36rpx;
			justify-content: space-between;
			.cancel-1{
				width: 225rpx;
				height: 70rpx;
				background: #EEEFF3;
				box-shadow: 10rpx 10rpx 20rpx 0rpx #BFC2CD, -10rpx -10rpx 20rpx 0rpx #FFFFFF, inset 10rpx 10rpx 50rpx 0rpx #CED5E1, inset -10rpx -10rpx 50rpx 0rpx #FFFFFF;
				border-radius: 12rpx;
				color: #181818;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.cancel-2{
				margin-left: 18rpx;
				width: 225rpx;
				height: 70rpx;
				background: #EEEFF3;
				box-shadow: 10rpx 10rpx 20rpx 0rpx #BFC2CD, -10rpx -10rpx 20rpx 0rpx #FFFFFF, inset 10rpx 10rpx 50rpx 0rpx #CED5E1, inset -10rpx -10rpx 50rpx 0rpx #FFFFFF;
				border-radius: 12rpx;
				color: #3FC4B6;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.currency{
		display: flex;
		align-items: center;
		padding: 30rpx 40rpx;
		border-bottom: 1rpx solid #C8CBD8;
		text{
			width: 96rpx;
			color: #181818;
			font-size: 24rpx;
			line-height: 28rpx;
		}
		input{
			width: 352rpx;
			margin-left: 35rpx;
			color: #181818;
			font-size: 24rpx;
			line-height: 28rpx;
		}
	}
	.currency-1{
		display: flex;
		align-items: center;
		padding: 30rpx 40rpx;
		border-bottom: 1rpx solid #C8CBD8;
		.currency-1-1{
			width: 96rpx;
			color: #181818;
			font-size: 24rpx;
			line-height: 28rpx;
			
		}
		.currency-1-2{
			margin-left: 35rpx;
			width: 352rpx;
			color: #7F828D;
			font-size: 24rpx;
			line-height: 28rpx;
			&.currency_1_2{
				color: #181818;
			}
		}
		.currency-1-3{
			color: #181818; ;
		}
		image{
			margin-left: 20rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}
	.currency-2{
		display: flex;
		padding: 30rpx 40rpx;
		border-bottom: 1rpx solid #C8CBD8;
		text{
			width: 96rpx;
			color: #181818;
			font-size: 24rpx;
			line-height: 28rpx;
		}
		textarea{
			width: 352rpx;
			margin-left: 35rpx;
			color: #181818;
			font-size: 24rpx;
			line-height: 28rpx;
			height: 64rpx;
		}
	}
	/deep/ .dialog-caption,
	/deep/ .picker-view{
		background: #EEEFF3;
	}
	/deep/ .selected-item-active,
	/deep/ .check{
		border-color: #3FC4B6 !important;
	}
	/deep/ .item{
		border-bottom: 1px solid #C8CBD8;
	}
</style>
